<template>
    <div class="root" @scroll="listScroll">

        <p v-show="dataState=='loading'" style="text-align:center;"></p>
        <p v-show="dataState=='fail'">网络故障</p>
        <div class="list" >
            <RoomItem v-for="(r,i) in rooms" :room="r" :key="i"></RoomItem>
        </div>
        <p><span class="fa fa-spinner fa-spin"></span></p>
    </div>
</template>

<script>
import RoomItem from "./RoomItem"
export default {
    props: ["rooms","dataState"],
    components: {
        RoomItem
    },
    methods: {
        listScroll(e) {
            console.log("列表滚动了")
            //元素自身高度
            // console.log(e.target.clientHeight)
            //元素的内容高度
            // console.log(e.target.scrollHeight)
            //滚动偏移量
            // console.log(e.target.scrollTop)
            if (e.target.scrollHeight - e.target.clientHeight - 100 <= e.target.scrollTop) {
                console.log("到底了")
                this.$emit("requestMore")
            }
        }
    }
}
</script>

<style scoped>
.root{
    height: calc(100vh - 50px);
    overflow: scroll;
    
}
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
}
p{
    font-size: 1.6rem;
    margin-top: 0;
    text-align: center;
}
</style>